<template>
  <AtActionSheet
    class="custom-comtainer"
    :class="actionSheetClass"
    :is-opened="isOpenedModal"
    :on-close="handleClose"
    :on-cancel="handleCancel"
    :catchtouchmove="true"
  >
    <view class="custom-comtainer-wrap" :style="comtainerWrapStyle">
      <view v-if="isShowTitle" class="custom-comtainer-title">
        <view class="title">
          {{ modalTitle }}
        </view>
        <image src="@/assets/icon/modal-close.png" @tap="handleClose" />
      </view>
      <view v-else v-show="hasCloseIcon" class="custom-comtainer-close">
        <image src="@/assets/icon/modal-close.png" @tap="handleClose" />
      </view>
      <slot />
    </view>
    <slot name="title" />
    <view v-if="isShowBottomBtn" class="custom-comtainer-footer">
      <slot name="footer" />
    </view>
  </AtActionSheet>
</template>
<script>
import { AtActionSheet } from "taro-ui-vue";
import "./index.scss";
export default {
  name: "ActionSheet",
  components: { AtActionSheet },
  props: {
    isOpenedModal: {
      required: true
    },
    isShowCancelBtn: {
      type: Boolean,
      default: false
    },
    modalTitle: {
      type: String,
      default: ""
    },
    isShowTitle: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 600
    },
    /* 是否展示关闭按钮 */
    hasCloseIcon: {
      type: Boolean,
      default: true
    },
    /* 是否自己触发close事件 */
    autoClose: {
      type: Boolean,
      default: true
    },
    /**是否展示底部按钮区域 */
    isShowBottomBtn: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    /**类名 */
    actionSheetClass() {
      return !this.isShowCancelBtn ? "hide-footer" : "";
    },
    comtainerWrapStyle() {
      return {
        height: `${this.height}rpx`
      };
    }
  },
  methods: {
    handleClose() {
      if (!this.autoClose) {
        this.$emit("closeModal", false);
        return;
      }
      this.$emit("update:isOpenedModal", false);
    },
    handleCancel() {
      this.$emit("cancel");
    }
  }
};
</script>
